<template>
  <div class="add-file">
    <je-modal
      v-model:visible="visible1"
      :title="fileMode === 'addFile' ? '添加分类' : '编辑文件夹'"
      button-align="center"
      width="600"
      height="auto"
      cancel-button
      :ok-button="onSubmit"
      @close="closeDialog"
    >
      <div class="warp">
        <je-form
          :model="modelRef"
          style="width: 500px"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 17 }"
          autocomplete="off"
          label-align="right"
          :colon="false"
        >
          <je-form-item label="名称" v-bind="validateInfos.name">
            <je-input v-model:value.trim="modelRef.name" />
          </je-form-item>
        </je-form>
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, onMounted, reactive, ref } from 'vue';

  import { Input, Form, Modal } from '@jecloud/ui';

  import { verifyData } from '@/utils/validate';

  import { addDevFolderApi, updateDevFolderApi } from '@/api';

  const useForm = Form.useForm;

  export default defineComponent({
    name: 'AddFile',
    components: {
      JeModal: Modal,
      JeInput: Input,
      JeForm: Form,
      JeFormItem: Form.Item,
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      fileMode: {
        type: String,
        default: 'addFile',
      },
      editPayload: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['update:visible', 'addFile'],
    setup(props, { emit }) {
      // 自己关闭对话框，修改父组件数据状态
      const closeDialog = () => {
        emit('update:visible', false);
      };
      const visible1 = ref(props.visible);
      const modelRef = reactive({
        name: '',
      });
      // 验证规则
      const rulesRef = reactive({
        name: verifyData.title,
      });

      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });
      const onSubmit = () => {
        validate()
          .then(() => {
            // 增加文件夹
            if (props.fileMode === 'addFile') {
              addDevFolderApi({ folderName: modelRef.name }).then((res) => {
                Modal.notice(res.message, 'success');
                emit('addFile', res.data.JE_RBAC_ROLE_ID), closeDialog();
              });
            } else {
              // 编辑文件夹
              const { folderId } = props.editPayload;
              if (modelRef.name === props.editPayload.label)
                return Modal.notice('无数据操作!', 'info');
              updateDevFolderApi({ folderName: modelRef.name, folderId }).then((res) => {
                Modal.notice(res, 'success');
                emit('addFile'), closeDialog();
              });
            }
          })
          .catch(() => {});
        return false;
      };

      onMounted(() => {
        if (props.editPayload?.label) {
          modelRef.name = props.editPayload?.label;
        }
      });

      return {
        modelRef,
        validateInfos,
        resetFields,
        onSubmit,
        closeDialog,
        visible1,
      };
    },
  });
</script>

<style lang="less" scoped>
  .add-file {
    :deep(.fa-window-maximize) {
      display: none;
    }
  }
</style>
